<template>
  <div class="unique-part">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学术成果</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/achievement' }"
        >学术成果管理</el-breadcrumb-item
      >
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card class="box-card">
      <el-container class="container">
        <el-main>
          <!-- 搜索区域 -->
          <el-row :gutter="20">
            <el-col :span="7">
              <el-input placeholder="请输入内容" v-model="query">
                <template v-slot:append>
                  <el-button @click="search" :icon="Search"></el-button>
                  <!-- <el-icon class="el-icon--right"><Search /></el-icon> -->
                </template>
              </el-input>
            </el-col>
            <!-- 添加用户 -->
            <el-col :span="4">
              <el-button class="add-user" type="primary" @click="addUser"
                >新建学术成果</el-button
              >
            </el-col>
            <!-- 占空的 -->
            <el-col :span="15">
              <div></div>
            </el-col>
            <!-- 门户列表 -->
            <div class="table">
              <el-table
                :data="userlist"
                :default-sort="{ prop: 'id', order: 'ascending' }"
                border
                class="userlist"
              >
                <el-table-column
                  prop="id"
                  label="序号"
                  sortable
                  width="80%"
                ></el-table-column>
                <el-table-column prop="title" label="标题" width="600%">
                </el-table-column>
                <!-- <el-table-column
                  prop="author"
                  label="作者"
                  width="100%"
                >
                </el-table-column> -->
                <!-- <el-table-column prop="abstract" label="摘要" width="100%" sortable>
                </el-table-column> -->
                <!-- <el-table-column prop="company" label="研究机构" width="100%" sortable>
                </el-table-column> -->
                <!-- <el-table-column prop="reference" label="引用" width="100%" sortable>
                </el-table-column> -->
                <!-- <el-table-column prop="department" label="学科分类" width="100%" sortable>
                </el-table-column> -->
                <!-- <el-table-column prop="key_word" label="关键词" width="100%" sortable>
                </el-table-column> -->
                <el-table-column prop="pub_year" label="发表年份" sortable>
                </el-table-column>
                <el-table-column label="操作">
                  <template v-slot="scope">
                    <el-button type="info" @click="showInfo(scope.row)"
                      >详情</el-button
                    >
                    <el-button
                      type="danger"
                      :icon="Delete"
                      circle
                      @click="handleDelete"
                    ></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-row>
        </el-main>
        <el-footer>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              @current-change="getUserList"
              v-model:currentPage="queryInfo.page"
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-footer>
      </el-container>
    </el-card>

    <!-- 添加用户表格 -->
    <el-dialog title="新建学术成果" v-model="this.dialogVisible" width="40%">
      <el-form
        :model="aaForm"
        :rules="aaRules"
        ref="aaForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="aaForm.title"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="aaForm.author"></el-input>
        </el-form-item>

        <el-form-item label="摘要" prop="abstract">
          <el-input
            autosize
            type="textarea"
            v-model="aaForm.abstract"
          ></el-input>
        </el-form-item>
        <el-form-item label="语种" prop="type_language">
          <el-select v-model="aaForm.type_language" placeholder="选择语种">
            <el-option label="中文" value="Chinese"></el-option>
            <el-option label="英文" value="English"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="研究机构" prop="company">
          <el-input v-model="aaForm.company"></el-input>
        </el-form-item>
        <el-form-item label="引用" prop="reference">
          <el-input
            autosize
            type="textarea"
            v-model="aaForm.reference"
          ></el-input>
        </el-form-item>
        <el-form-item label="二级学科分类" prop="department">
          <el-input v-model="aaForm.department"></el-input>
        </el-form-item>
        <el-form-item label="影响力" prop="influence">
          <el-input-number v-model="aaForm.influence"></el-input-number>
        </el-form-item>
        <el-form-item label="关键词（英文分号分隔）" prop="key_word">
          <el-input autosize type="textarea" v-model="aaForm.key_word"></el-input>
        </el-form-item>
        <el-form-item label="外部引用格式" prop="exp_ref">
          <el-input
            autosize
            type="textarea"
            v-model="aaForm.exp_ref"
          ></el-input>
        </el-form-item>
        <el-form-item label="出版日期" prop="pub">
          <el-date-picker
            v-model="aaForm.pub"
            type="date"
            placeholder="选择出版日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="种类" prop="type">
          <el-select v-model="aaForm.type" placeholder="选择种类">
            <el-option label="期刊" value="journal"></el-option>
            <el-option label="学位论文" value="dissertation"></el-option>
            <el-option label="专著" value="book"></el-option>
            <el-option label="会议" value="proceedings"></el-option>
            <el-option label="专利" value="patent"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div class="button-div">
        <el-form-item class="form-button">
          <el-button type="primary" @click="submitForm('aaForm')"
            >创建</el-button
          >
          <el-button @click="resetForm('aaForm')">重置</el-button>
        </el-form-item>
      </div>
    </el-dialog>

    <!-- 学术成果详情 -->
    <el-dialog title="详情" v-model="this.infoVisible" width="40%">
      <el-descriptions title="学术成果详情" column="1">
        <el-descriptions-item label="作者">
          <div v-for="(k, i) in infoForm.author" :key="i">
            {{ k.name }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="摘要">{{
          infoForm.abstract
        }}</el-descriptions-item>
        <el-descriptions-item label="研究机构">{{
          infoForm.company
        }}</el-descriptions-item>
        <el-descriptions-item label="引用">{{
          infoForm.reference
        }}</el-descriptions-item>
        <el-descriptions-item label="学科分类">{{
          infoForm.department
        }}</el-descriptions-item>
        <el-descriptions-item label="关键词">
          <div v-for="(k, i) in infoForm.keywords" :key="i">
            {{ k }}
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="button-div">
        <el-form-item class="form-button">
          <el-button @click="this.infoVisible = false">关闭</el-button>
        </el-form-item>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import axios from "axios";
  import { Search, Delete } from "@element-plus/icons";
</script>
<script>
  export default {
    data() {
      return {
        query: "",
        queryInfo: {
          q: "",
          page_size: 10,
          page: 1,
        },
        userlist: [],
        total: 0,
        dialogVisible: false,
        infoVisible: false,
        ruleForm: {
          name: null,
          sex: null,
          birth: null,
          phone: null,
          company: null,
          department: null,
          influence: null,
        },
        aaForm: {
          title: "",
          author: "",
          abstract: "",
          type_language: "",
          company: "",
          reference: "",
          department: "",
          influence: 0,
          key_word: "",
          exp_ref: "",
          pub: null,
          type: "",
        },
        aaRules: {
          title: [
            { required: true, message: "请输入标题", trigger: "change" },
          ],
          author: [
            { required: true, message: "请输入作者", trigger: "change" },
          ],
          abstract: [
            { required: true, message: "请输入摘要", trigger: "change" },
          ],
          type_language: [
            { required: true, message: "请选择语种", trigger: "change" },
          ],
          key_word: [
            { required: true, message: "请输入关键词", trigger: "change" },
          ],
          type: [
            { required: true, message: "请选择种类", trigger: "change" },
          ],
          pub: [
            { required: true, message: "请选择出版日期", trigger: "change" },
          ],
        },
        changeForm: {
          name: null,
          sex: null,
          birth: null,
          phone: null,
          company: null,
          department: null,
          influence: null,
        },
        infoForm: {},
        changedialogVisible: false,
      };
    },
    created() {
      this.query = sessionStorage.getItem("query");
      if (this.query == null) {
        this.query = "";
      }
      this.queryInfo.q = this.query;
      this.getUserList();
    },
    methods: {
      getUserList() {
        const data = {
          page: this.queryInfo.page,
          page_size: this.queryInfo.page_size,
          input: this.queryInfo.q,
        };
        axios.post("aa/search/", data).then((response) => {
          this.userlist = response.data.source;
          this.total = response.data.total;
          console.log(response.data.source);
        });
      },
      showInfo(row) {
        const form = {
          abstract: row.abstract,
          company: row.company,
          reference: row.reference,
          department: row.department,
          keywords: row.key_word,
          author: row.author,
        };
        this.infoForm = form;
        this.infoVisible = true;
      },
      handleDelete(row) {
        this.$confirm("您是否确认删除该学术成果?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const formData = {
              id: row.id,
            };
            axios.post("deleteAA/", formData).then((response) => {
              console.log(response);
              this.getUserList();
            });
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      addUser() {
        this.dialogVisible = true;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.aaForm);
            var formData = this.aaForm;
            formData['pub_year'] = this.aaForm['pub'].getFullYear();
            formData['pub_month'] = this.aaForm['pub'].getMonth()+1;
            formData['pub_day'] = this.aaForm['pub'].getDate();
            axios.post("addAA/", formData).then((response) => {
              console.log(response.data);
              this.getUserList();
            });
            this.dialogVisible = false;
          } else {
            console.log("error submit!");
            return false;
          }
        });
      },
      resetForm() {
        this.aaForm = {};

        this.ruleForm = {};
      },
      search() {
        this.queryInfo.q = this.query;
        this.getUserList();
        sessionStorage.setItem("query", this.query);
      },
      changeIdentity($event, row) {
        const formData = {
          username: row.username,
          password: row.password,
          email: row.email,
          is_administrator: row.is_administrator,
        };
        axios
          .put("admin/users/" + row.username + "/", formData)
          .then((response) => {
            console.log(response.data);
            this.getUserList();
          });
      },
    },
  };
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}

.add-user {
  width: 70%;
  align-content: center;
  text-align: center;
}

.userlist {
  margin-top: 20px;
  margin-left: 10px;
  font-size: 13px;
  /* width: 98%; */
}

.el-table {
  width: fit-content;
}

.table {
  width: 100%;
}

.el-container {
  height: 100%;
}

.el-pagination {
  margin-left: 10px;
  margin-top: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
}

.form-button {
  display: block;
  width: fit-content;
}

.el-button {
  color: white !important;
}

.button-div {
  display: flex;
  justify-content: center;
}

.el-switch {
  margin-left: 30px;
}
</style>
